<template>
  <div>
    <div class="panel">
      <div class="panel-header">
        {{ $route.meta.title }}
      </div>
      <i-form
        ref="form"
        :items="formItems"
        :model="form"
        :label-width="150"
        label-position="left"
        :rules="rules"
      >
        <template slot="transfer">
          <el-form-item label="可兑换区域:" prop="area" class="is-required">
            <tree-transfer
              ref="treeTransfer"
              :titleLeft="titleLeft"
              :titleRight="titleRight"
              :data_left="transferData_left_area"
              :data_right="transferData_right_area"
              :showFilter="showFilter"
              :disabled="disabled"
              @listenLeftTreeInfoEvent="bindLeftTreeInfoEvent"
              @listenRightTreeInfoEvent="bindRightTreeInfoEvent"
            ></tree-transfer>
          </el-form-item>
        </template>
      </i-form>
    </div>
    <div class="panel-btn-wrapper">
      <el-button type="success" @click="handleOk">确认并导出券码</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
  </div>
</template>
<script>
import { insertBatch } from '@/api/timeCard'
import TreeTransfer from '@/components/TreeTransfer'

export default {
  name: 'BatchAdd',
  components: { TreeTransfer },
  data() {
    return {
      disabled: false,
      titleLeft: '可选地区', //左侧显示标题
      titleRight: '已选地区', //右侧选择标题
      transferData_left_area: [], //左侧选择数据
      transferData_right_area: [], //右侧选择数据
      showFilter: true, //是否显示模糊查询
      form: {},
      formItems: [
        {
          type: 'inputNumber',
          label: '时长卡包含时长:',
          value: 'initialTime',
          placeholder: '',
          clearable: true,
          min: 1,
          max: 9999,
          controlsPosition: 'right',
          required: true,
        },
        {
          type: 'inputNumber',
          label: '时长卡张数:',
          value: 'integralNum',
          placeholder: '',
          clearable: true,
          min: 1,
          max: 9999,
          controlsPosition: 'right',
          required: true,
        },
        {
          slot: 'transfer',
          value: 'area',
        },
      ],
      tableData: {},
      rules: {
        area: [
          {
            validator: (rule, value, callback) => {
              if (this.transferData_right_area.length === 0) {
                return callback(new Error('该项为必填项'))
              } else {
                return callback()
              }
            },
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    bindRightTreeInfoEvent(data) {
      this.transferData_right_area = data
      this.$refs.form.validateField('area')
    },
    bindLeftTreeInfoEvent(data) {
      this.transferData_left_area = data
    },
    reset() {
      this.form = {}
      this.$refs.treeTransfer.reset()
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        let province = new Set()
        let city = new Set()
        let district = new Set()
        let nation = []
        this.transferData_right_area.forEach((item) => {
          let len = item.name.split('/').length
          nation.push(item.name.split('/').join(''))
          if (len === 1) {
            province.add(item.id)
          }
          if (len === 2) {
            province.add(item.parent)
            city.add(item.id)
          }
          if (len === 3) {
            province.add(item.parentArr[1])
            city.add(item.parentArr[0])
            district.add(item.id)
          }
        })
        let params = {
          initialTime: this.form.initialTime,
          integralNum: this.form.integralNum,
          nationName: nation.join(','),
        }
        Object.assign(
          params,
          city.size && { city: [...city].join(',') },
          district.size && { district: [...district].join(',') },
          province.size && { province: [...province].join(',') }
        )
        insertBatch(params).then(() => {
          this.$router.push('BatchList')
          this.$message({
            type: 'success',
            showClose: true,
            message: '操作成功',
          })
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.i-form {
  padding: 0 40px;
  &::v-deep .el-form-item__content {
    width: 50%;
  }
  &::v-deep .el-form-item.is-error .el-transfer-panel__body .el-input__inner,
  .el-form-item.is-error .el-textarea__inner {
    border-color: #d9d9d9;
  }
  &::v-deep .el-form-item.is-error .el-transfer-panel {
    border-color: #ff4d4f;
  }
}
</style>
